<template>
    <div> 
      <p>{{ title }}页面</p>
      <el-form :model="UserForm" :rules="rules" ref="UserForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="UserForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input v-model="UserForm.password"></el-input>
        </el-form-item>
  
        <el-form-item label="用户性别" prop="sex">
          <el-radio-group v-model="UserForm.sex">
            <el-radio  :label="1">男</el-radio>
            <el-radio  :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>

      
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="UserForm.email"></el-input>
        </el-form-item>

        <el-form-item label="地区" prop="address">
            <el-input v-model="UserForm.address"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
            <el-input v-model="UserForm.phone"></el-input>
        </el-form-item>

        <el-form-item label="时间" prop="date">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="UserForm.createTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
  
        <el-form-item label="头像" prop="image">
          <UpLoadImg :action="action" :dialogImageUrl="UserForm.image" @Sendimg="sendimg" ref="uploadimg" :fileList="fileList"></UpLoadImg>
        </el-form-item>


  
        <el-form-item label="用户签名" prop="introduce">
            <WangEditor :introduction="UserForm.introduce" @sendEditor="handlEditor" ref="wangedit"></WangEditor>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('UserForm')">确定</el-button>
            <el-button @click="resetForm('UserForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
  </template>
  
  <script>
  import UpLoadImg from '@/components/Background/UpLoadImg/uploadimg.vue'
  import WangEditor from '@/components/WangEditor.vue'
  import { mapState } from 'vuex';
    export default {
      components:{
          WangEditor,
          UpLoadImg
      },
      data() {
        return {
          action:this.$baseUrl + '/files/UserImgUpload',
          fileList:[],
          UserForm: {
            username: '',
            sex: '',
            createTime: '',
            introduce:'',
            image:'',
            phone:'',
            email:'',
            password:'',
            address:''
          },
          rules: {
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
            ],
            date: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
          }
        };
      },
      computed:{
        ...mapState('editfo',['title','baseDate'])
      },
      methods: {
       async submitForm() {
        if(this.title=='添加'){
          console.log(typeof this.UserForm.image)
          console.log(this.UserForm)
          const res = await this.$axios.post("User/AddUser",this.UserForm)
          if(res.code=="200"){
            this.$message.success(res.msg)
            this.$router.push("/user")
          }
          else{
            this.$message.error(res.msg)
          }
        }
        else{
          const ase = await this.$axios.put('User/UpdateUser',this.UserForm)
          console.log(ase)
          this.$router.push("/user")
          this.$message.success(ase.msg)
        }
        
      },
        handlEditor(val){
          this.UserForm.introduce = val.replace(/<[^>]+>/g,'\n')
      },
        resetForm(formName) {
          this.$refs[formName].resetFields();
      },
  
        sendimg(val){
          this.UserForm.image = val
      },
        resetForm(formName) {
          this.UserForm= []
          this.$refs[formName].resetFields();
          this.$refs.uploadimg.clear()
          this.$refs.wangedit.editor.clear()
        }
      },
      created(){
        if(this.title=="编辑"){
          this.UserForm=this.baseDate
          console.log(this.UserForm.sex)
          this.fileList.push({name:'',url:this.UserForm.image})
          this.$nextTick(()=>{
            this.$refs.wangedit.html=this.UserForm.introduce
          })
        }
      }
    }
  </script>
  <style scoped></style>